<template>
  <div class="wrapLimit clx main">
    <div class="inventoryList auditCmpt">
      <!-- 查询表单 -->
      <div class="form-baseinfo">
        <LPSearchBar
          v-model="searchModel"
          :search-data="searchData"
          label-width="100px"
          @handleSearchSubmit="handleSearchSubmit"
          @handleSearchReset="handleSearchReset"
        />
      </div>
      <div class="form-baseinfo">
        <!-- 表格列表 -->
        <LPTablePage
          :show-indexfixed="false"
          index-label="序号"
          :index-width="200"
          :table-data="tableData"
          :table-column="tableColumn"
          :total="total"
          :current-page="currentPage"
          align="center"
          class="table"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginLog } from '@/api/LaborProtection/user'
import { parseTime } from '@/utils/lpUtils.js'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  components: { LPTablePage, LPSearchBar },
  data() {
    return {
      searchModel: {},
      searchData: [
        { label: '', placeholder: '用户名', prop: 'userName' },
        // { label: '姓名', placeholder: '请输入', prop: 'JobNum' },
        { label: '', prop: 'StartOrderTime', type: 'datetimerange', placeholder: '开始时间', width: '100px' }
      ],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '操作时间', prop: 'createTime' },
        { label: '操作内容', prop: 'businessName' },
        { label: '用户名', prop: 'userName' },
        { label: '浏览器版本', prop: 'browser' },
        { label: 'IP地址', prop: 'ipAddress' }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    // 获取列表
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.SDateTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EDateTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      }
      getLoginLog(params).then((res) => {
        if (!res.error) {
          this.tableData = res.items
          this.total = res.totalCount
        }
      })
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.el-form-item__label {
  font-weight: normal;
}

.el-dialog__body {
  padding-top: 0px;
}

.el-divider {
  margin-top: 5px;
}
</style>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
}
.btn_area {
  background-color: #fff;
  padding: 0.2rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.inventoryList {
  .form-baseinfo {
    ::v-deep .el-table {
      padding-top: 20px;
    }
    ::v-deep .search-bar input.el-input__inner {
      width: 2rem;
    }
  }

  ::v-deep .table {
    .red {
      color: $high_risk_color;
    }
  }
}
</style>
